<template>
	<view class="load" :style="myStyle">
		<view :class="mainClass" @click="onClick">
			<label class="label" v-text="label"></label>
			<image class="image" :src="src" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			width:{
				type:String,
				default:'100%'
			},
			height:{
				type:String,
				default:'100rpx'
			},
			bkColor:{
				type:String,
				default:'transparent'
			},
			hoverColor:{
				type:String,
				default:'transparent'
			},
			fontSize:{
				type:String,
				default:'50rpx'
			},
			load:{
				type:String,
				default:'0s'
			},
			endStyle:{
				type:Boolean,
				default:true
			},
			src:{
				type:String,
				default:'#'
			},
			url:{
				type:String,
				default:'#'
			},
			label:{
				type:String,
				default:'添加文字'
			}
		},
		mounted(){
			const that=this;
			for(const index in that['_props']){
				if(index=='endStyle')
					break;
				that['myStyle']+='--'+index+':'+that['_props'][index]+';';
			}
		},
		data() {
			return {
				myStyle:'',
				mainClass:'main'
			}
		},
		methods: {
			onClick(){
				const that=this;
				if(that.url=='#')
					return ;
				that.mainClass='main-hover';
				setTimeout(function(){
					that.mainClass='main';
				},200);
				uni.navigateTo({
					url:that.url
				});
			}
		}
	}
</script>

<style scoped>
	.load{
		animation: load var(--load) linear;
		text-align: left;
	}
	.main{
		width: calc(var(--width)*0.7);
		padding-left: calc(var(--width)*0.15);
		padding-right: calc(var(--width)*0.15);
		height: var(--height);
		font-size: var(--fontSize);
		display: flex;
		align-items: center;
		justify-content: space-between;
		background:-webkit-linear-gradient(40deg, #ffffff, var(--bkColor), #ffffff);
		border-radius: calc(var(--width)*0.3);
		color: #555555;
	}
	.main-hover{
		width: calc(var(--width)*0.7);
		padding-left: calc(var(--width)*0.15);
		padding-right: calc(var(--width)*0.15);
		height: var(--height);
		font-size: var(--fontSize);
		display: flex;
		align-items: center;
		justify-content: space-between;
		background:-webkit-linear-gradient(40deg, #ffffff, var(--hoverColor), #ffffff);
		border-radius: calc(var(--width)*0.2);
		color: #555555;
	}
	.label{
		width: calc(var(--width)*0.7 - var(--height)*0.8);
	}
	.image{
		height: calc(var(--height)*0.8);
		width: calc(var(--height)*0.8);
	}
</style>
